<template>
  <div>
    <!-- 查询条件 -->
    <el-form :model="form" label-width="100px" label-position="left" :rules="rules">
      <el-row :gutter="20">
        <!-- 随访时间 -->
        <el-col :lg="8" :xl="8">
          <el-form-item label="随访时间">
            <el-date-picker
              v-model="date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width: 100%"
              :clearable="false"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <!-- 重点人群类型 -->
        <el-col :lg="8" :xl="8">
          <el-form-item label="重点人群类型">
            <el-select v-model="form.groupType" style="width: 100%">
              <el-option
                v-for="item in groupType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 身份证号 -->
        <el-col :lg="8" :xl="8">
          <el-form-item label="身份证号">
            <el-input v-model="form.idCard"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <!-- 机构ID -->
        <el-col :lg="8" :xl="8">
          <el-form-item label="机构">
            <el-select v-model="form.mechId" style="width: 100%" clearable>
              <el-option
                v-for="item in mechId"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- 创建人姓名 -->
        <el-col :lg="8" :xl="8">
          <el-form-item label="创建人姓名">
            <el-input v-model="form.createUserName"></el-input>
          </el-form-item>
        </el-col>
        <!-- 居民姓名 -->
        <el-col :lg="8" :xl="8">
          <el-form-item label="居民姓名">
            <el-input v-model="form.residentName"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <!-- 审核状态 -->
        <el-col :lg="8" :xl="8">
          <el-form-item label="状态">
            <el-radio v-model="form.status" label="0">未审核</el-radio>
            <el-radio v-model="form.status" label="1">删除</el-radio>
            <el-radio v-model="form.status" label="2">已审核</el-radio>
          </el-form-item>
        </el-col>
        <!-- 上传状态 -->
        <el-col :lg="8" :xl="8">
          <el-form-item label="上传状态">
            <el-radio v-model="form.isUpload" label="0">已上传</el-radio>
            <el-radio v-model="form.isUpload" label="1">未上传</el-radio>
          </el-form-item>
        </el-col>
        <el-col :lg="8" :xl="8">
          <el-form-item>
            <HButton type="search" @click="enquire">搜索</HButton>
            <HButton type="reset" @click="restForm">重置</HButton>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- 按钮组 -->
    <el-row type="flex">
      <HButton type="add" @click="examine">审核</HButton>
      <HButton type="delete" @click="del">删除</HButton>
    </el-row>
    <!-- 表格 -->
    <el-table class="mt-20" :data="tableData" border stripe>
      <el-table-column type="index" label="序号" align="center">
      </el-table-column>
      <el-table-column prop="userName" label="居民姓名" align="center">
      </el-table-column>
      <el-table-column prop="idCard" label="身份证号" align="center">
      </el-table-column>
      <el-table-column prop="idCard" label="状态" align="center">
      </el-table-column>
      <el-table-column
        prop="filingDate"
        label="随访时间"
        align="center"
        :formatter="formatter1"
      >
      </el-table-column>
      <el-table-column
        prop="groupType"
        label="重点人群类型"
        align="center"
        :formatter="formatter"
      >
      </el-table-column>
      <el-table-column prop="mechName" label="创建机构" align="center">
      </el-table-column>
      <el-table-column prop="createUserName" label="创建人" align="center">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        :formatter="formatter2"
      >
      </el-table-column>
      <el-table-column
        label="操作"
        header-align="center"
        align="center"
        width="200px"
      >
        <template slot-scope="scope">
          <HButton @click="edit(scope.row)" type="update" size="mini"
            >修改</HButton
          >
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="form.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="form.limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <el-dialog
      title="修改"
      :visible.sync="editDiavisible"
      width="80%"
      @close="cancle"
      @opened="opened"
    >
    <residentHealth ref="residentHealthDia" @transData="transData"></residentHealth>
    </el-dialog>
  </div>
</template>

<script>
import { getFollow } from "@/api/followForms/formsQuery";
import { getAll } from "@/api/family_doctor/family_doctor";
import residentHealth from './resident-health'
export default {
  components:{residentHealth},
  data() {
    return {
      date: [],
      total: 0,
      editDiavisible:false,
      row:{},
      ifEdit:true,
      form: {
        startTime: "",
        endTime: "",
        groupType: "1",
        page: 1,
        limit: 10,
      },
      param: {
        page: 1,
        limit: 100000,
        code: "",
        name: "",
      },
	  rules:{
		   idCard: [
			{ min: 18, max: 18, message: '输入正确的身份证号', trigger: 'blur' }
		  ],
	  },
      tableData: [],
      groupType: [
        {
          id: "1",
          name: "个人基本信息",
        },
        {
          id: "2",
          name: "孕产妇",
        },
        {
          id: "3",
          name: "儿童",
        },
        {
          id: "4",
          name: "高血压",
        },
        {
          id: "5",
          name: "糖尿病",
        },
        {
          id: "6",
          name: "脑卒中",
        },
        {
          id: "7",
          name: "冠心病",
        },
        {
          id: "8",
          name: "肺结核",
        },
        {
          id: "9",
          name: "严重精神障碍",
        },
        {
          id: "10",
          name: "中医体质辨识",
        },
      ],
      mechId: [],
    };
  },
  created() {
    // this.date[0] = new Date();
    // this.date[1] = new Date();
    this.getTableData();
    this.getOrganData();
  },
  methods: {
    getTableData() {
      this.date[0] = this.timestampToTime(this.date[0]);
      this.date[1] = this.timestampToTime(this.date[1]);
      this.date[1] = this.creatDate(this.date[1]);
      if (this.date.length > 0) {
        this.form.startTime = this.dateChange(this.date[0]);
        this.form.endTime = this.dateChange(this.date[1]);
      }
      getFollow(this.form).then((res) => {
        this.tableData = res.data.list;
        this.total = res.data.total;
      });
    },
    getOrganData() {
      getAll(this.param).then((res) => {
        this.mechId = res.data.list;
      });
    },
    //查询
    enquire() {
      this.form.page = 1;
      this.form.limit = 10;
      this.getTableData();
    },
    //重置
    restForm() {
      for (var key in this.form) {
        this.form[key] = "";
      }
      this.date[0] = new Date();
      this.date[1] = new Date();
      this.form.groupType = "1";
      this.form.page = 1;
      this.form.limit = 10;
    },
    //审核
    examine() {},
    //删除
    del() {},
    //修改
    edit(row) {
      this.editDiavisible = true
      this.row =row
    },
    opened(){
      this.$refs.residentHealthDia.editForm(this.row,this.ifEdit);
    },
    cancle(){
      this.editDiavisible = false
    },
    //几页每条
    handleSizeChange(size) {
      this.form.limit = size;
      this.getTableData();
    },
    //第几页
    handleCurrentChange(page) {
      this.form.page = page;
      this.getTableData();
    },
    //转时间戳
    dateChange(date) {
      return new Date(date).getTime() - 8 * 60 * 60 * 1000-1;
    },
    //日期+1
    creatDate(date) {
      var dateTime = new Date(date);
      dateTime = new Date(dateTime.setDate(dateTime.getDate() + 1));
      dateTime =
        dateTime.getFullYear() +
        "-" +
        this.appendZero(dateTime.getMonth() + 1) +
        "-" +
        this.appendZero(dateTime.getDate());
      return dateTime;
    },
    //补0
    appendZero(obj) {
      if (obj < 10) {
        return "0" + obj;
      } else {
        return obj;
      }
    },
    //时间戳转日期
    timestampToTime(timestamp) {
      var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-";
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var D = this.appendZero(date.getDate());
      // var h = date.getHours() + ":";
      // var m = date.getMinutes() + ":";
      // var s = date.getSeconds();
      return Y + M + D;
    },
    //表格数据转换
    formatter(row) {
      return row.groupType == 1
        ? "个人基本信息"
        : row.groupType == 2
        ? "孕产妇"
        : row.groupType == 3
        ? "儿童"
        : row.groupType == 4
        ? "高血压"
        : row.groupType == 5
        ? "糖尿病"
        : row.groupType == 6
        ? "脑卒中"
        : row.groupType == 7
        ? "冠心病"
        : row.groupType == 8
        ? "肺结核"
        : row.groupType == 9
        ? "严重精神障碍"
        : row.groupType == 10
        ? "中医体质辨识"
        : "";
    },
    formatter1(row) {
      return this.timestampToTime(row.filingDate);
    },
    formatter2(row) {
      return this.timestampToTime(row.createTime);
    },
    transData(){},
  },
};
</script>

<style lang="less" scoped>
</style>
